<template>
	<view class="conference-management">
		<xbd-pages-content title="会议时间">
		<template #content>
			<view class="meetingtime">
				<view class="tip">
					<view class="title">
						请勾选预约会议时间段
					</view>
					<view class="radio">
						<checkbox value="0" :checked="true" />已选
						<checkbox value="1" :checked="false" />可选
						<checkbox value="2" disabled/>不可预定
					</view>
					<view class="mask"></view>
				</view>
				<checkbox-group class="date"  @change="checkboxChange">
				    <label class="row" v-for="(item, index) in dateList" :key="index">
						<view style="color: #101010;">{{ item.time[0] }}<text style="margin: 0 40rpx;">--</text>{{ item.time[1] }}</view>
				        <view>
				            <checkbox :value="index + ''" :checked="item.checked" :disabled="item.disabled" />
				        </view>
				    </label>
				</checkbox-group>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	var dayjs = require('dayjs');
	import { Meeting } from '@/api/index.js';
	var isBetween = require('dayjs/plugin/isBetween');
	let dateList = [
		{
			time: ['06:00', '06:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['06:15', '06:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['06:30', '06:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['06:45', '07:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['07:00', '07:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['07:15', '07:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['07:30', '07:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['07:45', '08:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['08:00', '08:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['08:15', '08:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['08:30', '08:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['08:45', '09:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['09:00', '09:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['09:15', '09:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['09:30', '09:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['09:45', '10:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['10:00', '10:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['10:15', '10:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['10:30', '10:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['10:45', '11:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['11:00', '11:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['11:15', '11:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['11:30', '11:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['11:45', '12:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['12:00', '12:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['12:15', '12:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['12:30', '12:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['12:45', '13:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['13:00', '13:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['13:15', '13:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['13:30', '13:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['13:45', '14:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['14:00', '14:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['14:15', '14:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['14:30', '14:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['14:45', '15:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['15:00', '15:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['15:15', '15:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['15:30', '15:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['15:45', '16:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['16:00', '16:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['16:15', '16:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['16:30', '16:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['16:45', '17:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['17:00', '17:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['17:15', '17:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['17:30', '17:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['17:45', '18:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['18:00', '18:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['18:15', '18:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['18:30', '18:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['18:45', '19:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['19:00', '19:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['19:15', '19:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['19:30', '19:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['19:45', '20:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['20:00', '20:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['20:15', '20:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['20:30', '20:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['20:45', '21:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['21:00', '21:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['21:15', '21:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['21:30', '21:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['21:45', '22:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['22:00', '22:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['22:15', '22:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['22:30', '22:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['22:45', '23:00'],
			checked: false,
			disabled: false
		},
		{
			time: ['23:00', '23:15'],
			checked: false,
			disabled: false
		},
		{
			time: ['23:15', '23:30'],
			checked: false,
			disabled: false
		},
		{
			time: ['23:30', '23:45'],
			checked: false,
			disabled: false
		},
		{
			time: ['23:45', '23:59'],
			checked: false,
			disabled: false
		}
	];
	export default {
		data() {
			return {
				dateList: [],
				oldValue: [],
				time: []
			};
		},
		methods: {
			initList() {
				const hour = dayjs().hour();
				const minute = dayjs().minute();
				const list = JSON.parse(JSON.stringify(dateList))
				this.dateList = list.filter(item => {
					const oldTime = item.time[0].split(':');
					if (oldTime[0] == hour) {
						// return oldTime[1] >= minute;
						let newMinute = 0;
						if ( minute < 15 &&  minute >= 0) {
							newMinute = 0;
						} else if ( minute >= 15 &&  minute < 30) {
							newMinute = 15;
						} else if ( minute >= 30 &&  minute < 45) {
							newMinute = 30;
						} else if ( minute >= 45 &&  minute < 60) {
							newMinute = 45;
						}
						return oldTime[1] >= newMinute;
					} else {
						return oldTime[0] >= hour;
					}
				})
			},
			checkboxChange(e) {
				this.dateList.forEach(item => {
					if (item.checked && item.disabled) {
						item.disabled = false;
						item.checked = false;
					}
					item.checked = false;
				})
				let value = e.detail.value; 
				value.sort(function(a, b){return a - b}); 
				if (!value.length) { 
					this.dateList.forEach(item => item.checked =false); 
				} else if (value.length > 1) { 
					value = value.filter(item => { 
						Number(item); 
						return true; 
					});
					const max = Math.max.apply(null, value); 
					const min = Math.min.apply(null, value); 
					let flag = false; 
					for(let i = min; i <= max; i++) { 
						if (this.dateList[i].disabled && !this.dateList[i].checked) { 
							flag = true; 
							break; 
						}
					}
					if (!flag) {
						for(let i = min; i <= max; i++) {
							this.dateList[i].checked = true;
							this.dateList[i].disabled = true;
						}
						this.dateList[max].disabled = false;
						this.dateList[min].disabled = false;
					} else {
						value.forEach(item => {
							if (~this.oldValue.indexOf(item)) {
								this.dateList[item].checked = false;
							} else {
								this.dateList[item].checked = true;
							}
						})
					}
				} else {
					this.dateList[value[0]].checked = true;
				}
				const arr = [];
				this.dateList.forEach((item, index) => {
					if (item.checked) {
						arr.push(index+'');
					}
				})
				this.oldValue = arr;
			},
			infoStatus() {
				const nowDate = dayjs().format('YYYY-MM-DD');
				this.dateList.forEach(item => {
					this.time.forEach(item1 => {
						if(dayjs(nowDate + ' ' + item.time[0]).isBetween(nowDate + ' ' + item1[0], nowDate + ' ' + item1[1], 'minute', '[)')) {
							item.disabled = true;
						}
					})
				})
			},
			initSelect() {
				const nowDate = dayjs().format('YYYY-MM-DD');
				this.dateList.forEach((item, index) => {
					if(dayjs(nowDate + ' ' + item.time[0]).isBetween(nowDate + ' ' + this.selectTime[0], nowDate + ' ' + this.selectTime[1], 'minute', '[)')) {
						item.disabled = true;
						item.checked = true;
						this.oldValue.push(index + '');
					}
				})
				this.dateList[this.oldValue[0]].disabled = false;
				this.dateList[this.oldValue[this.oldValue.length - 1]].disabled = false;
			}
		},
		async onLoad(res) {
			const info = JSON.parse(res.info);
			const { success, data: { list } } = await Meeting.getMeetingTime(info.name, res.date);
			if (res.date === dayjs(new Date()).format('YYYY-MM-DD')) {
				this.initList();
			} else {
				this.dateList = JSON.parse(JSON.stringify(dateList));
			}
			this.time = list;
			this.infoStatus();
			this.selectTime = JSON.parse(res.selectTime);
			if (this.selectTime.length) {
				this.initSelect();
			}
		},
		onUnload() {
			let timeArr = [];
			if(this.oldValue.length) {
				if (this.oldValue.length === 1) {
					timeArr = this.dateList[this.oldValue[0]].time;
				} else {
					const max = Math.max.apply(null, this.oldValue);
					const min = Math.min.apply(null, this.oldValue);
					timeArr.push(this.dateList[min].time[0]);
					timeArr.push(this.dateList[max].time[1]);
				}
			}
			uni.$emit('editTime', timeArr, this.oldValue.length);
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
		color: #FFFFFF !important;
		background-color: $uni-color-primary;
	}
	checkbox {
		border-radius: 50%;
	}
	.meetingtime {
		.tip {
			position: relative;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			padding: 15px 30rpx;
			
			font-size: 24rpx;
			
			color: #999999;
			
			box-sizing: border-box;
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
			.title {
				color: #194769;
			}
			.radio {
				display: flex;
				align-items: center;
				checkbox {
					margin-left: 20rpx;
					transform: scale(0.6, 0.6);
				}
			}
		}
		.date {
			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				height: 30px;
				padding: 0 40rpx 0 80rpx;
				
				border-bottom: 1px solid #EEEEEE;
				box-sizing: border-box;
				&:nth-child(1) {
					border-top: 1px solid #EEEEEE;
				}
			}
		}
	}
</style>
